/********************************************************************************
 *@fileName: index.jsx
 *@description: 宠物管家-资源位
 *@author: Xhd
 *@API: 清泉
 *@Product: 马文娇
 *@date: 2024-05-14 15:10:15
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Modal, Switch, Space } from 'antd';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheButton from '@/components/TheButton';
import TheImage from '@/components/TheImage';
import TheDialog from "@/components/TheDialog";
import { apiGetShufflingPage, apiGetShufflingAdd, apiGetShufflingEdit, apiGetShufflingDel, apiUpdateStatusBySite } from '@/request/configuration'
import Editor from "@/views/settings/shuffling/component/editor";
import '@/views/settings/shuffling/style/style.less';

class ResourceBits extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columnsCarouse: [
        {
          title: "图片",
          dataIndex: "configCarouselFilez",
          key: "configCarouselFilez",
          render: (text, record) => {
            return <TheImage width={270} height={106} src={record.configCarouselFilez} />
          }
        },
        {
          title: "标题",
          dataIndex: "configCarouselTitle",
          key: "configCarouselTitle"
        },
        {
          title: "排序",
          dataIndex: "configCarouselSort",
          key: "configCarouselSort"
        },
        {
          title: "操作",
          render: (text, record) => {
            let category = ''
            switch (record.configCarouselSite) {
              case 1:
                category = 'carousel'
                break;
              case 2:
                category = 'active'
                break;
              case 8:
                category = 'card'
                break;
              default:
                break;
            }
            return <>
              <TheButton haspermi={['sceneTool:resource:edit']} onClick={() => this.openDialog('editor', record)}>修改</TheButton>
              <TheButton haspermi={['sceneTool:resource:delete']} onClick={() => this.del(record)}>删除</TheButton>
            </>
          }
        },
      ],
      cardDataSource: [],
      pageData: { pageNo: 1, pageSize: 5 },
      total: 0,
      cardloading: false,
      initialValues: null,
      type: '',
      cardSwitch: false,
    }
  }
  componentDidMount() {
    this.getCardBannerData(1, 5)
  }

  getCardBannerData = async (pageNo, pageSize) => {
    const cardBanner = await apiGetShufflingPage({ configCarouselSite: '16', configSiteType: '1', pageNo, pageSize })
    if (cardBanner.code === 0) {
      if (cardBanner.data.length !== 0 && cardBanner.data[0].configCarouselStatus === 'Y') {
        this.setState({
          cardSwitch: true
        })
      }
      this.setState({
        cardDataSource: cardBanner.data,
        cardloading: false,
        total: cardBanner.totalCount,
      })
    } else {
      this.setState({
        cardDataSource: null,
        cardloading: false
      })
    }
  }

  bannerOnChange = async (e) => {
    const { cardDataSource } = this.state
    if (cardDataSource.length !== 0) {
      let status = 'N'
      if (e) {
        status = 'Y'
      }
      let res = await apiUpdateStatusBySite({ configCarouselSite: '16', configCarouselStatus: status })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: status === 'Y' ? '卡片轮播位开启成功！' : '卡片轮播位关闭成功！'
        })
        this.setState({
          cardSwitch: e
        })
      }
    } else {
      React.$message({
        type: 'warning',
        content: '无卡片轮播数据不可开启！'
      })
    }
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo: pageNo,
        pageSize: pageSize
      }
    })
    this.getData(pageNo, pageSize)
  }

  openDialog = (type, value,) => {
    if (type === "editor") {
      this.setState({ title: "修改", dialogStatus: true, initialValues: value, type: 'editor', edit: true, });
    } else {
      this.setState({ title: "新增", dialogStatus: true, initialValues: null, type: 'add', });
    }
  }

  del = record => {
    React.$confirm({
      title: "警告",
      content: `确定删除此信息吗？`,
      onOk: async () => {
        this.setState({
          loading: true,
        })
        const data = await apiGetShufflingDel({ configCarouselId: record.configCarouselId })
        if (data.code === 0) {
          await this.getCardBannerData(1, 5)
          this.setState({
            loading: false
          })
        } else {
          this.setState({
            loading: false
          })
        }
      }
    });
  }

  onFinish = async values => {
    const { edit, initialValues, } = this.state
    this.setState({
      btnLoading: true
    })
    let data = null
    let configCarouselSite = '16'
    let configSiteType = '1'
    if (edit) {
      data = await apiGetShufflingEdit({ ...values, configCarouselId: initialValues.configCarouselId, configCarouselSite, configSiteType })
    } else {
      data = await apiGetShufflingAdd({ ...values, configCarouselSite, configSiteType })
    }
    if (data.code === 0) {
      this.setState({
        pageData: {
          pageNo: 1,
          pageSize: 5
        }
      })
      await this.dialogCancel()
      await this.getCardBannerData(1, 5)
      if (initialValues) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      } else {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
      }
    } else {
      this.setState({
        btnLoading: false
      })
    }
  }

  dialogCancel = () => {
    this.setState({
      dialogStatus: false,
      title: '',
      btnLoading: false,
      initialValues: null,
      edit: false
    })
  }

  render() {
    const { columnsCarouse, cardDataSource, pageData: { pageNo, pageSize }, total, cardloading, btnLoading, dialogStatus, title, initialValues, type, category, cardSwitch } = this.state;
    return (<div className='p-layout-box'>
      <div style={{ marginTop: '10px' }}>
        <div className={"p-layout-header shufflingDiv"} style={{ padding: '10px' }}>
          <Space>
            <h2>卡片轮播图</h2>
            <div style={{ color: '#bbb', fontSize: '13px' }}>
              <Switch checked={cardSwitch} onClick={this.bannerOnChange} />
              &nbsp;&nbsp;开启显示后卡片广告位会同时显示！
            </div>
          </Space>

          <TheButton type={'primary'} size={'middle'} haspermi={['sceneTool:resource:add']}
            onClick={() => { this.openDialog('add') }}>新增</TheButton>
        </div>
        <div className={"p-layout-content-pagination"}>
          <TheTable loading={cardloading} dataSource={cardDataSource} columns={columnsCarouse} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
      <TheDialog
        visible={dialogStatus}
        title={title}
        width={800}
        handleCancel={this.dialogCancel}
        footer={null}
      >
        <Editor dialogCancel={this.dialogCancel} onFinish={this.onFinish} data={initialValues}
          btnLoading={btnLoading}
          type={type}
          category={category} />
      </TheDialog>
    </div>)
  }
}

export default ResourceBits